<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>基础语法1：插值表达式、data、methods、computed和watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
       <h1 style="color: red;">知识点1：插值表达式</h1>
       <!-- {{}}插值表达式符号 -->
      <p>我是变量：{{msg}}</p>
      <p>我是表达式：{{num+100}}</p>
      <p>我是条件运算符：{{1+1==2?'ok':'no'}}</p>
      <p>我是方法：{{add()}}</p>
      <h1 style="color: aqua;">知识点2data</h1>
      <h3>我们在控制台中可以通过实例名.data的形式来访问或修改data中的数据</h3>
      <h1 style="color: burlywood;">知识点3：methods</h1>
      <h3>方法的定义有两种形式：1，方法名（）{}   2.方法名：function（）{}</h3>
       <p>{{sub(33334333333)}}</p>
       <h1>知识点4:copputed计算属性</h1>
       <h3>当我们遇到比较复杂的逻辑时，vue提倡我们使用computed计算属性
        在计算属性里面，我们可以解决比较复杂的逻辑，包括逻辑计算，函数调用等，最后只要返回一个
       </h3>
       <p>字符串倒置：{{rev}}</p>
       <p>调用方法字符串倒置：{{revMethod()}}</p>
       <h3>计算属性是基于其依赖的变量进行缓存的，只有它相关的依赖发生改变时，才会重新求值
        而方法是每次页面刷新时都会重新调用
       </h3>
        <h3>通常计算属性是不能进行修改的，是只读的</h3>
        <h1>知识点5：watch 监听</h1>
        <h3>当我们在需要某种状态变化时执行一些其他操作，watch具有状态监听功能
            只要监听到当前vue实例中数据变化就会调用当前数据所绑定的方法
        </h3>
        <h4>1,函数式监听器：在watch选项中声明的函数即为函数式监听器，其中函数名就是我们要监听的数据源</h4>
        <h4>2,对象监听器，在watch选项中声明的对象即为对象式监听器，其中的对象名就是我们要监听的数据源</h4>
    </div>
</body>
</html>

<script>
      const appConn=Vue.createApp({
            //data里面放置全部的数据，包括变量和对象
        data() {
            return {
                msg:'我的第一个vue页面',
                num:1,
                grade:60,
                users:{
                    name:'zhuying',
                    age:18
                    //对象
                }
            }
        },
        //在methods里面放置全部的方法
        methods: {
            add(){
                return this.num+100000000
            },
            sub:function(val){
                return this.num+val 
            },
            revMethod(){
                   console.log("我是计算属性，我被调用了一次");
                return this.msg.split('').reverse().join('')
            
            }
        },
        computed:{
            //在此处放置全部的计算属性
            //字符串倒置
            rev(){
                console.log("我是计算属性，我被调用了一次");
                return this.msg.split('').reverse().join('')
            }
        },
        watch:{
            //此处放置所有的监听器（侦听器）
            //函数式监听器
            grade(newData,oldData){
                console.log("改变之前的数据"+oldData);
                console.log("改变之后的数据"+newData);
                if (oldDAta<newData){
                    console.log("你进步了，不错，奖励100元");
                    
                }
                else{
                    console.log("你退步了，快给我100元");
                }

            },
            //对象式监听器
            'users.age':{
                handler(newData,oldData){
                console.log("改变之前的数据"+oldData);
                console.log("改变之后的数据"+newData);
               
                if(newData>=120 || newData<0)
                console.log("你确定你输入的是年龄吗？");
            }
            }
        }
      } ).mount('#app')
      </Script>